<!--
	author:guojiteng
-->
<template>
  <div class="dataStatistics">
    <el-scrollbar class="scrollbar-con">
      <div class="quick-entry">
        <el-card class="datas-item">
          <div class="leftHead" @click="toPath('personmanage')">
            <img class="icon" src="./images/zgrz.png">
          </div>
          <div class="rightInfo" @click="toPath('personmanage')">
            <div class="r-title">职工认证
              <img src="./images/jiantou.png">
            </div>
            <div class="r-num">快捷创建及认证新职工会员</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead" @click="toPath('directional')">
            <img class="icon" src="./images/flff.png">
          </div>
          <div class="rightInfo" @click="toPath('directional')">
            <div class="r-title">福利发放
              <img src="./images/jiantou.png">
            </div>
            <div class="r-num">快速创建及发放福利活动</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead" @click="toPath('hfjn')">
            <img class="icon" src="./images/hfjn.png">
          </div>
          <div class="rightInfo" @click="toPath('hfjn')">
            <div class="r-title">费用缴纳
              <img src="./images/jiantou.png">
            </div>
            <div class="r-num">一键生成账单，智能缴费</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead" @click="toPath('hdbm')">
            <img class="icon" src="./images/hdzx.png">
          </div>
          <div class="rightInfo" @click="toPath('hdbm')">
            <div class="r-title">活动中心
              <img src="./images/jiantou.png">
            </div>
            <div class="r-num">活动报名&投票&调查问卷</div>
          </div>
        </el-card>
      </div>
      <div class="user-statistics">
        <div class="u-title">用户统计</div>
        <div class="u-datas">
          <el-row type="flex" justify="space-around" :gutter="20">
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/register.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">注册用户数</div>
                  <div class="r-num">{{ userData.registeredUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/authentication.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">认证用户数</div>
                  <div class="r-num">{{ userData.authUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/drz.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">待认证用户数</div>
                  <div class="r-num">{{ userData.authMemberCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/man.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">男用户数</div>
                  <div class="r-num">{{ userData.manUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/woman.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">女用户数</div>
                  <div class="r-num">{{ userData.womanUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-around" :gutter="20" style="margin-top: 20px;">
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/open.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">开户数</div>
                  <div class="r-num">{{ userData.openAccountUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/erlei.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">开二类户数</div>
                  <div class="r-num">{{ userData.openSecondAccountUsersCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/zs.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">正式员工数</div>
                  <div class="r-num">{{ userData.formalMemberCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/tx.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">退休员工数</div>
                  <div class="r-num">{{ userData.retireMemberCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
            <el-col>
              <el-card class="datas-item">
                <div class="leftHead">
                  <img class="icon" src="./images/lz.png">
                </div>
                <div class="rightInfo">
                  <div class="r-title">离职员工数</div>
                  <div class="r-num">{{ userData.resignMemberCount || 0 }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="welfare-statistics">
        <div class="w-title">福利统计</div>
        <div class="w-datas">
          <div class="datas-item1 jx">
            <div class="leftHead">
              <img class="icon" src="./images/jx.png">
            </div>
            <div class="rightInfo">
              <div class="r-title">正在进行的福利活动</div>
              <div class="r-num">{{ welfareData.progressActivityCount || 0 }}</div>
            </div>
          </div>
          <div class="datas-item1 ks">
            <div class="leftHead">
              <img class="icon" src="./images/ks.png">
            </div>
            <div class="rightInfo">
              <div class="r-title">本年开始的福利活动</div>
              <div class="r-num">{{ welfareData.thisYearStartActivityCount || 0 }}</div>
            </div>
          </div>
          <div class="datas-item1 js">
            <div class="leftHead">
              <img class="icon" src="./images/js.png">
            </div>
            <div class="rightInfo">
              <div class="r-title">本年已结束福利活动</div>
              <div class="r-num">{{ welfareData.thisYearEndActivityCount || 0 }}</div>
            </div>
          </div>
          <div class="datas-item1 lj">
            <div class="leftHead">
              <img class="icon" src="./images/lj.png">
            </div>
            <div class="rightInfo">
              <div class="r-title">累计福利活动</div>
              <div class="r-num">{{ welfareData.accumulateActivityCount || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="line" />
        <div class="condition">
          <div v-for="(item,i) in types" :key="i" class="btn" :class="{choose:choose==item.key}" @click="changeC(item)">
            {{ item.name }}
          </div>
        </div>
        <div class="table-list">
          <el-row :gutter="20">
            <el-col v-for="(item,index) in welfareList" :key="index" :span="8">
              <div
                class="t-item"
                :class="getGiveInfoType(item.giveInfoType)"
              >
                <div class="top">
                  <div
                    class="t-left"
                    :class="getGiveInfoType(item.giveInfoType)"
                  >
                    {{
                      getType(item.giveInfoType)
                    }}
                  </div>
                  <div class="t-right" :title="item.giveInfoName">
                    {{ item.giveInfoName || item.giveName|| '' }}
                  </div>
                </div>
                <div class="bottom">
                  <!-- 福利包 -->
                  <template
                    v-if="item.giveInfoType=='0' || item.giveInfoType=='2'
                      || item.giveInfoType=='3'|| item.giveInfoType=='6'"
                  >
                    <div class="b-item">
                      <div class="val" :title="item.giveNum || 0">{{ item.giveNum || 0 }}</div>
                      <div class="key" title="已发人数">已发人数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.drawNum || 0">{{ item.drawNum || 0 }}</div>
                      <div class="key" title="已领人数">已领人数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.giveMoney || 0">{{ item.giveMoney || 0 }}</div>
                      <div class="key" title="已发金额">已发金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.drawMoney || 0">{{ item.drawMoney || 0 }}</div>
                      <div class="key" title="已领金额">已领金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.useMoney || 0">{{ item.useMoney || 0 }}</div>
                      <div class="key" title="已用金额">已用金额</div>
                    </div>
                  </template>
                  <!-- 优惠券 -->
                  <template
                    v-else-if="item.giveInfoType=='1' || item.giveInfoType=='4'
                      || item.giveInfoType=='5'|| item.giveInfoType=='7'"
                  >
                    <div class="b-item">
                      <div class="val" :title="item.giveNum || 0">{{ item.giveNum || 0 }}</div>
                      <div class="key" title="已发放人数">已发放人数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.drawNum || 0">{{ item.drawNum || 0 }}</div>
                      <div class="key" title="已领取人数">已领取人数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.useNumber || 0">{{ item.useNumber || 0 }}</div>
                      <div class="key" title="已使用人数">已使用人数</div>
                    </div>
                  </template>
                  <template v-else-if="item.giveInfoType=='8'">
                    <div class="b-item">
                      <div class="val" :title="item.giveMoney || 0">{{ item.giveMoney || 0 }}</div>
                      <div class="key" title="总金额">总金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.balance || 0">{{ item.balance || 0 }}</div>
                      <div class="key" title="剩余金额">剩余金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.drawNum || 0">{{ item.drawNum || 0 }}</div>
                      <div class="key" title="已领人数">已领人数</div>
                    </div>
                  </template>
                  <template v-else-if="item.giveInfoType=='9'">
                    <div class="b-item">
                      <div class="val" :title="item.giveMoney || 0">{{ item.giveMoney || 0 }}</div>
                      <div class="key" title="总金额">总金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.balance || 0">{{ item.balance || 0 }}</div>
                      <div class="key" title="剩余金额">剩余金额</div>
                    </div>

                    <div class="b-item">
                      <div class="val" :title="item.sumShare || 0">{{ item.sumShare || 0 }}</div>
                      <div class="key" title="红包总份数">红包总份数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.surplusShare || 0">{{ item.surplusShare || 0 }}</div>
                      <div class="key" title="红包剩余份数">红包剩余份数</div>
                    </div>
                  </template>
                  <template v-else-if="item.giveInfoType=='10'">
                    <div class="b-item">
                      <div class="val" :title="item.sumShare || 0">{{ item.sumShare || 0 }}</div>
                      <div class="key" title="奖品总份数">奖品总份数</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.surplusShare || 0">{{ item.surplusShare || 0 }}</div>
                      <div class="key" title="剩余份数">剩余份数</div>
                    </div>

                    <div class="b-item">
                      <div class="val" :title="item.giveMoney || 0">{{ item.giveMoney || 0 }}</div>
                      <div class="key" title="奖品总金额">奖品总金额</div>
                    </div>
                    <div class="b-item">
                      <div class="val" :title="item.balance || 0">{{ item.balance || 0 }}</div>
                      <div class="key" title="剩余金额">剩余金额</div>
                    </div>
                  </template>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import {
  queryUser,
  queryWelfareChart,
  queryWelfareTable
} from './api'
import { mapGetters } from 'vuex'

export default {
  name: 'DataStatistics',
  data() {
    return {
      userData: {},
      welfareData: {},
      welfareList: [],
      codes: [],
      choose: '',
      types: [
        {
          name: '全部',
          key: ''
        },
        {
          name: '福利包',
          key: '0,2,3,6,8'
        },
        {
          name: '线上兑换券',
          key: '1,4'
        },
        {
          name: '线下提货券',
          key: '5,7'
        },
        {
          name: '活动福利',
          key: '8,9,10'
        }

      ]
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  created() {
    this.getUserData()
    this.getwelfareData()
    this.getwelfareList()
    this.setCode(this.user.menuDatas)
  },
  methods: {
    getGiveInfoType(t) {
      let n = 'flb'
      // 0,2,3,6
      if (t === '4' || t === '1' || t === '5' || t === '7') {
        n = 'yhq'
      } else if (t === '8' || t === '9' || t === '10') {
        n = 'hdfl'
      }
      return n
    },
    getType(t) {
      let n = '福利包'
      // 0,2,3,6
      if (t === '4' || t === '1') {
        n = '兑换券'
      } else if (t === '5' || t === '7') {
        n = '提货券'
      } else if (t === '8' || t === '9' || t === '10') {
        n = '活动福利'
      }
      return n
    },
    changeC(item) {
      this.choose = item.key
      this.getwelfareList()
    },
    setCode(datas) { // 遍历路由  获取code数组
      for (var i in datas) {
        this.codes.push(datas[i].code)
        if (datas[i].children) {
          this.setCode(datas[i].list)
        }
      }
    },
    toPath(code) {
      const a = this.codes.indexOf(code)
      if (a < 0) {
        this.$message.error('您没有管理权限！')
      } else {
        if (code === 'personmanage') {
          this.$router.push('/usermanage/personmanage')
        } else if (code === 'directional') {
          this.$router.push('/welfare/directional/index')
        } else if (code === 'hfjn') {
          this.$router.push('/orgbuild/hfjn/index')
        } else if (code === 'hdbm') {
          this.$router.push('/activity/hdbm/index')
        }
      }
    },
    getUserData() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        queryUser().then(res => {
          loading.close()
          if (res.data.code === '200') {
            this.userData = res.data.data || {}
          } else {
            this.$message.error(res.data.msg || '获取数据失败')
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    getwelfareData() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        queryWelfareChart().then(res => {
          loading.close()
          if (res.data.code === '200') {
            this.welfareData = res.data.data || {}
          } else {
            this.$message.error(res.data.msg || '获取数据失败')
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    getwelfareList() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        return new Promise((resolve, reject) => {
          queryWelfareTable({ type: this.choose }).then(res => {
            loading.close()
            if (res.data.code === '200') {
              this.welfareList = res.data.data || []
            } else {
              this.$message.error(res.data.msg || '获取数据失败')
            }
          }).catch(error => {
            loading.close()
            reject(error)
          })
        })
      }, 1000)
    }
  }
}
</script>
<style lang="scss" type="text/scss">
@import "@/styles/mixin.scss";

.dataStatistics {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  padding: 20px;
  padding-bottom: 0;

  .scrollbar-con {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      box-sizing: border-box;
      overflow-x: hidden !important;
      margin-right: 0 !important;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .quick-entry {
      height: 120px;
      width: 100%;
      display: flex;
      margin-bottom: 20px;

      .datas-item {
        width: 0;
        flex: 1;
        padding: 0px;
        margin-right: 15px;
        height: 104px;
        border: none;
        cursor: pointer;
        box-sizing: border-box;
        &:last-child {
          margin-right: 0;
        }

        .el-card__body {
          padding: 10px !important;
          width: 100%;
          display: flex !important;
          height: 100%;
          align-items: center;

          .leftHead {
            width: 72px;

            .icon {
              width: 72px;
              height: 82px;
            }
          }

          .rightInfo {
            flex: 1;
            margin-left: 5px;

            .r-title {
              font-size: 14px;
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: bold;
              text-align: left;
              color: #333;

              > img {
                margin-left: 7px;
                width: 18px;
                height: 18px;
                vertical-align: middle;
              }
            }

            .r-num {
              margin-top: 8px;
              font-size: 14px;
              font-family: DIN Medium, DIN Medium-Medium;
              font-weight: 500;
              text-align: left;
              color: #B6B6B6;
            }
          }
        }
      }
    }

    .user-statistics {
      height:316px;
      width: 100%;
      background: #FFFFFF;
      padding: 19px;
      border-radius: 8px;

      .u-title {
        font-size: 20px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 600;
        text-align: left;
        color: #333333;
      }

      .u-datas {
        margin-top: 19px;
        // display: flex;

        .datas-item {
           height: 104px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .el-card__body {
            padding: 0 !important;
            width: 100%;
            display: flex !important;
            .leftHead {
              width: 72px;
              .icon {
                width: 72px;
                height: 82px;
              }
            }
            .rightInfo {
              flex: 1;
              margin-left: 5px;
              margin-top:15px ;
              .r-title {
                font-size: 14px;
                font-family: PingFang SC Regular, PingFang SC Regular-Regular;
                font-weight: 400;
                text-align: left;
                color: #999999;
              }

              .r-num {
                margin-top: 8px;
                font-size: 24px;
                font-family: DIN Medium, DIN Medium-Medium;
                font-weight: 500;
                text-align: left;
                color: #333333;
              }
            }
          }
        }
      }
    }

    .welfare-statistics {
      background: #ffffff;
      border-radius: 8px;
      margin-top: 20px;
      padding: 20px 19px;

      .w-title {
        font-size: 20px;
        font-family: PingFang SC Medium, PingFang SC Medium-Medium;
        font-weight: 600;
        text-align: left;
        color: #333333;
      }

      .w-datas {
        margin-top: 19px;
        display: flex;

        .datas-item1 {
          width: 0;
          flex: 1;
          margin-right: 15px;
          height: 104px;
          border-radius: 8px;
          opacity: 1;
          display: flex;
          cursor: pointer;
          box-sizing: border-box;
          align-items: center;
          &.jx {
            background: #FFF4E5;
          }

          &.ks {
            background: #FFF2EE;
          }

          &.js {
            background: #F3EFFF;
          }

          &.lj {
            background: #EDF4FF;
          }

          .leftHead {
            width: 72px;

            .icon {
              width: 72px;
              height: 82px;
            }
          }

          .rightInfo {
            flex: 1;
            margin-left: 5px;
            .r-title {
              font-size: 14px;
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;
            }

            .r-num {
              margin-top: 8px;
              font-size: 24px;
              font-family: DIN Medium, DIN Medium-Medium;
              font-weight: 500;
              text-align: left;
              color: #333333;
            }
          }
        }
      }

      .line {
        height: 1px;
        opacity: 1;
        background: #eeeeee;
        margin: 20px 0;
      }

      .condition {
        padding: 0px 0 20px 0;
        display: flex;
        justify-content: center;

        .btn {
          width: 108px;
          height: 40px;
          opacity: 1;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: 500;
          border-radius: 20px;
          margin-right: 30px;
          background-color: #F1F2F4;
          color: #999999;
          cursor: pointer;

          &.choose {
            background-color: #e44d42;
            color: #FFFFFF;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }

      .table-list {
        background: #FDFDFD;

        .t-item {
          height: 154px;
          opacity: 1;
          background: #ffffff;
          border-radius: 8px;
          margin-bottom: 20px;
          box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.06);

          &.flb {
            border-left: 5px solid #FF612C;
          }

          &.yhq {
            border-left: 5px solid #46A4F7;
          }
          &.hdfl {
            border-left: 5px solid #FFA42D;
          }

          .top {
            height: 60px;
            display: flex;
            border-bottom: 1px solid #eeeeee;
            padding-left: 19px;

            .t-left {
              margin-top: 20px;
              width: 48px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              font-size: 12px;
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: 500;
              color: #ffffff;

              &.flb {
                background: url("./images/flb.png") no-repeat;
                background-size: 100% 100%;
              }

              &.yhq {
                background: url("./images/yhq.png") no-repeat;
                background-size: 100% 100%;
              }
              &.hdfl {
                background: url("./images/hdfl.png") no-repeat;
                background-size: 100% 100%;
              }
            }

            .t-right {
              margin-left: 7px;
              width: 0;
              flex: 1;
              height: 60px;
              line-height: 60px;
              opacity: 1;
              font-size: 16px;
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: 500;
              text-align: left;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
            }
          }

          .bottom {
            height: 94px;
            display: flex;
            padding-left: 7px;

            .b-item {
              flex: 1;
              width: 0;
              text-align: center;
              margin-right: 7px;

              .val {
                margin-top: 25px;
                opacity: 1;
                font-size: 15px;
                font-family: PingFang SC Medium, PingFang SC Medium-Medium;
                font-weight: 700;
                text-align: center;
                color: #333333;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
              }

              .key {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                margin-top: 15px;
                opacity: 0.7;
                font-size: 13px;
                font-family: PingFang SC Regular, PingFang SC Regular-Regular;
                font-weight: 400;
                text-align: center;
                color: #3c3c3c;
              }
            }
          }
        }
      }
    }
  }
}
</style>
